<template>
  <div class="list">
    <div>
      <RatedList />
      <MovieList @addbs="addbs" ref="movie" @finish="finish" />
    </div>
  </div>
</template>

<script>
import RatedList from "./RatedList.vue";
import MovieList from "./MovieList";
import BScroll from "better-scroll";

let bs;

export default {
  components: {
    RatedList,
    MovieList,
  },
  // data() {
  //   return {
  //     num: 1,
  //   };
  // },
  methods: {
    addbs() {
      bs = new BScroll(".list", {
        scrollX: false,
        scrollY: true,
        click: true,
        // 允许我们可以使用上拉加载功能
        // pullUpLoad: true,
        pullUpLoad: {
          // 离下面面还有距离的时候触发pullingUp
          threshold: 100,
        },
      });
      // 监听触底
      bs.on("pullingUp", () => {
        // console.log("我已经触底了");
        this.$refs.movie.getMore();
        // this.num++;
      });
    },
    finish(done) {
      // 用来重新计算高度
      bs.refresh();
      if (!done) {
        // 允许下一次的数据请求
        bs.finishPullUp();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  height: 100%;
}
</style>
